<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
		<link rel="stylesheet" href="./miniView.css" />
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
		<script src="./jquery.mousewheel.js"></script>
		<script src="./miniView.js"></script>
		<style type="text/css">
			.borderDiv {
				width: 800px;
				height: 600px;
				border: 1px solid;
				overflow: hidden;
				left: 100px;
				top: 20px;
				position: relative;
			}
			.mainContainer {
				width: 2000px;
				height: 1500px;
				background-color: #bad6cb;
				position: relative;
			}
			#view {
				left: -400px;
				top: -300px;
			}
		</style>
		<script>
			$(function() {
				var miniViewObj = MiniView.init({selector: "#view"});
			})
		</script>
	</head>
	<body>
		<a target="_blank" href="https://github.com/zhdonghd/miniView" style="margin-left: 50px; font-weight: bold; font-size: 18px;">Click here for detail.</a>
		<div class="borderDiv">
			<div class="mainContainer" id="view">
				<div style="position: absolute; opacity: 1; left: 387px; top: 787px; z-index: 15;" id="jsPlumb_3_22">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 75px; top: 1032px; z-index: 14;" id="jsPlumb_3_21">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 419px; top: 1339px; z-index: 13;" id="jsPlumb_3_20">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 751px; top: 891px; z-index: 12;" id="jsPlumb_3_19">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1106px; top: 1134px; z-index: 11;" id="jsPlumb_3_18">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1579px; top: 1272px; z-index: 10;" id="jsPlumb_3_17">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1563px; top: 846px; z-index: 9;" id="jsPlumb_3_16">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1759px; top: 565px; z-index: 8;" id="jsPlumb_3_15">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1657px; top: 95px; z-index: 7;" id="jsPlumb_3_14">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1012px; top: 94px; z-index: 6;" id="jsPlumb_3_13">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
							<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 132px; top: 418px; z-index: 5;" id="jsPlumb_3_12">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 80px; top: 75px; z-index: 4;" id="jsPlumb_3_11">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 1223px; top: 439px; z-index: 3;" id="jsPlumb_3_10">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 854px; top: 664px; z-index: 2;" id="jsPlumb_3_9">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div><div  style="position: absolute; opacity: 1; left: 685px; top: 375px; z-index: 1;" id="jsPlumb_3_8">
					<div style="position:relative">
						<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
							<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
						</svg>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>